<template>
    <div class="wrapper">
        <top-header title="提交审核"></top-header>
        <scroller :show-scrollbar="false" class="content">
            <text class="cont_title">审核图片</text>
            <div>
                <text class="car_image_angle">行驶证：</text>
                <image class="car_image" :src="imgPath1" @click="upload(1)"></image>
            </div>
            <div>
                <text class="car_image_angle">行驶里程：</text>
                <image class="car_image" :src="imgPath2" @click="upload(2)"></image>
            </div>
            <div>
                <text class="car_image_angle">整车左前照片：</text>
                <image class="car_image" :src="imgPath3" @click="upload(3)"></image>
            </div>
            <div>
                <text class="car_image_angle">发动机仓整体：</text>
                <image class="car_image" :src="imgPath4" @click="upload(4)"></image>
            </div>
            <div>
                <text class="car_image_angle">变速箱底部螺丝：</text>
                <image class="car_image" :src="imgPath5" @click="upload(5)"></image>
            </div>
            <div>
                <text class="car_image_angle">变速箱发动机结合处：</text>
                <image class="car_image" :src="imgPath6" @click="upload(6)"></image>
            </div>
            <div>
                <text class="car_image_angle">发动机编号：</text>
                <image class="car_image" :src="imgPath7" @click="upload(7)"></image>
            </div>
            <div>
                <text class="car_image_angle">检测人员车主合影：</text>
                <image class="car_image" :src="imgPath8" @click="upload(8)"></image>
            </div>
            <div class="button">
                <wxc-button text="提交"
                    @wxcButtonClicked="next" :btnStyle="btnStyle"></wxc-button>
            </div>
        </scroller>
    </div>
</template>
<script>
import { WxcButton } from 'weex-ui';
import header from '../../common/header'
export default {
    components: { WxcButton, 
        'top-header': header, 
    },
    data () {
        return {
            token: '',
            imgPath1: 'bmlocal://assets/acw/car1.jpg',
            imgPath2: 'bmlocal://assets/acw/car2.jpg',
            imgPath3: 'bmlocal://assets/acw/car3.jpg',
            imgPath4: 'bmlocal://assets/acw/car4.jpg',
            imgPath5: 'bmlocal://assets/acw/car5.jpg',
            imgPath6: 'bmlocal://assets/acw/car6.jpg',
            imgPath7: 'bmlocal://assets/acw/car7.jpg',
            imgPath8: 'bmlocal://assets/acw/car8.jpg',
            btnStyle: {
                'background-color': '#1E90FF',
            },
            submitParam: '',
            nextClick: true,
        }
    },
    created () {
        let user = this.$storage.getSync('UserInfo')
        this.token = user.token
        this.$router.getParams().then(resData => {
            this.submitParam = resData
        })
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        // 上传图片
        upload (param) {
            this.uploadImage().then(res => {
                switch (param) {
                    case 1:
                        this.imgPath1 = res
                        break
                    case 2:
                        this.imgPath2 = res
                        break
                    case 3:
                        this.imgPath3 = res
                        break
                    case 4:
                        this.imgPath4 = res
                        break
                    case 5:
                        this.imgPath5 = res
                        break
                    case 6:
                        this.imgPath6 = res
                        break
                    case 7:
                        this.imgPath7 = res
                        break
                    case 8:
                        this.imgPath8 = res
                        break
                    default:
                        break
                }
            }, error => {
                this.$notice.toast({ message: '上传失败'})
            })
        },
        // 上传图片接口
        uploadImage () {
            return new Promise((resolve, reject) => {
                this.$image.pickAndUpload({
                    allowCrop: false,             // 是否允许编辑（只有当 maxCount == 1时 此参数才会生效） 默认是false
                    params: {},                  // 传递的参数
                    header: {}                   // 自定义请求 header
                })
                .then(resData => {
                    console.log(resData)    // [url1, url2...]
                    // this.$notice.toast({ message: resData[0].data.url})
                    resolve(resData[0].data.url)
                }, error => {
                    console.log(error)
                    reject(error)
                })
            })
        },
        // 发布买车
        next () {
            //行驶证
            if (this.imgPath1.indexOf('car1.jpg') != -1) {
                this.$notice.toast({ message: '行驶证'})
                return
            }
            //行驶里程
            if (this.imgPath2.indexOf('car2.jpg') != -1) {
                this.$notice.toast({ message: '行驶里程'})
                return
            }
            //整车左前照片
            if (this.imgPath3.indexOf('car3.jpg') != -1) {
                this.$notice.toast({ message: '整车左前照片'})
                return
            }
            //发动机仓整体
            if (this.imgPath4.indexOf('car4.jpg') != -1) {
                this.$notice.toast({ message: '发动机仓整体'})
                return
            }
            //变速箱底部螺丝
            if (this.imgPath5.indexOf('car5.jpg') != -1) {
                this.$notice.toast({ message: '变速箱底部螺丝'})
                return
            }
            //变速箱发动机结合处
            if (this.imgPath6.indexOf('car6.jpg') != -1) {
                this.$notice.toast({ message: '变速箱发动机结合处'})
                return
            }
            //发动机编号
            if (this.imgPath7.indexOf('car7.jpg') != -1) {
                this.$notice.toast({ message: '发动机编号'})
                return
            }
            //检测人员车主合影
            if (this.imgPath8.indexOf('car8.jpg') != -1) {
                this.$notice.toast({ message: '检测人员车主合影'})
                return
            }
            
            this.submitParam.pics = this.imgPath1 + ';' +
                                this.imgPath2 + ';' +
                                this.imgPath3 + ';' +
                                this.imgPath4 + ';' +
                                this.imgPath5 + ';' +
                                this.imgPath6 + ';' +
                                this.imgPath7 + ';' +
                                this.imgPath8
            if (!this.nextClick) {
                this.$notice.toast({ message: '正在提交，请稍后'})
                return
            } 
            this.nextClick = false
            this.$fetch({
                method: 'POST',    // 大写
                name: 'maintenance.submitReview', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    'id': this.submitParam.id,  
                    'pics': this.submitParam.pics, 
                    'status': 4,  
                },
                header: {
                    'X-TMACW-APP-Token': this.token
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.back()
                }
                this.$notice.toast({ message: resData.errmsg})
                this.nextClick = true
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
                reject(error)
                // this.$notice.toast({ message: "登录失败, 请重试"})
            })
        }
    }
}
</script>
<style>
.iconfont {
    font-family: iconfont;
}
.wrapper{
    background-color: #fff;
}
.cont_title{
    background-color: #1E90FF;
    text-align: center;
    color: #fff;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
}
.car_image_angle{
    color: #666;
    height: 60px;
    line-height: 60px;
    margin: 10px;
}
.car_image{
    height: 400px;
    margin: 10px;
}
.button{
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
</style>
